<template>
  <div class="activity-sign">
    <div class="activity-sign-btn" v-if="flag" @click="reqActivityCheckIn">签到</div>
    <div class="activity-signed-btn" v-if="!flag">已签到</div>
    <div style="font-size:14px;margin-top:40rpx;" v-if="!flag">你已经签到!</div>
  </div>
</template>

<script>
import {Toast} from 'vant'
export default {
  data(){
    return {
      activityId: "",
      flag: true,
    }
  },
  components:{
  },
  mounted(){
    this.activityId = this.$route.query.id;
    this.activityCheckStatus();
  },

  methods:{
    //获取签到状态
    async activityCheckStatus(){
      let params = {
        activity_id: this.activityId,
      }
      let res = await this.$api.activityCheckStatus(params);
      if(res.level == "success"){
        if(res.data == 1){
          this.flag = false;
        }else{
          this.flag = true;
        }
      }else{
        Toast({
          message: res.message,
          icon: 'none',
          duration: 1000
        })
      }
    },
    //点击签到
    async reqActivityCheckIn(){
      let params = {
        activity_id: this.activityId,
      }
      let res = await this.$api.activityCheckIn(params);
      if(res.level == "success"){
        Toast({
          message: res.message,
          icon: 'none',
          duration: 1000
        })
        this.flag = false;
      }else{
        Toast({
          message: res.message,
          icon: 'none',
          duration: 1000
        })
        if(res.data=='no_join'){
          setTimeout(()=>{
            this.$router.replace({name:'ActivityDetail',query:{id:this.activityId}})
          },1000)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .activity-sign{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    .activity-sign-btn{
      width: 300px;
      height: 300px;
      text-align: center;
      line-height: 300px;
      background-color: rgb(50, 146, 211);
      color: #fff;
      border-radius: 50%;
    }
    .activity-signed-btn{
      width: 300px;
      height: 300px;
      text-align: center;
      line-height: 300px;
      background-color: rgb(82, 84, 85);
      color: #fff;
      border-radius: 50%;
    }
  }
</style>